<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售订单功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #409eff;
        }

        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e4e7ed;
            border-radius: 6px;
        }

        .section h3 {
            color: #409eff;
            margin-top: 0;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: inline-block;
            width: 120px;
            font-weight: bold;
            color: #606266;
        }

        input,
        select,
        textarea {
            width: 300px;
            padding: 8px 12px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 14px;
        }

        textarea {
            height: 80px;
            resize: vertical;
        }

        .btn {
            background-color: #409eff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
        }

        .btn:hover {
            background-color: #66b1ff;
        }

        .btn-danger {
            background-color: #f56c6c;
        }

        .btn-danger:hover {
            background-color: #f78989;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .table th,
        .table td {
            border: 1px solid #e4e7ed;
            padding: 12px;
            text-align: left;
        }

        .table th {
            background-color: #f5f7fa;
            font-weight: bold;
            color: #606266;
        }

        .table tr:nth-child(even) {
            background-color: #fafafa;
        }

        .status-tag {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }

        .status-draft {
            background-color: #e6a23c;
            color: white;
        }

        .status-submitted {
            background-color: #409eff;
            color: white;
        }

        .status-approved {
            background-color: #67c23a;
            color: white;
        }

        .status-completed {
            background-color: #67c23a;
            color: white;
        }

        .status-cancelled {
            background-color: #f56c6c;
            color: white;
        }

        .total-info {
            background-color: #f5f7fa;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
        }

        .total-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .total-label {
            font-weight: bold;
            color: #606266;
        }

        .total-value {
            font-size: 16px;
            color: #409eff;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>销售订单管理系统</h1>
            <p>基于Vue 3 + Element Plus + .NET Core的完整销售订单解决方案</p>
        </div>

        <div class="section">
            <h3>功能特性</h3>
            <ul>
                <li>✅ 销售订单的完整CRUD操作</li>
                <li>✅ 支持订单明细管理</li>
                <li>✅ 自动计算含税/不含税金额</li>
                <li>✅ 支持折扣率设置</li>
                <li>✅ 订单状态流转管理</li>
                <li>✅ 操作记录追踪</li>
                <li>✅ 响应式设计，支持移动端</li>
                <li>✅ 完整的表单验证</li>
                <li>✅ 分页查询和搜索过滤</li>
            </ul>
        </div>

        <div class="section">
            <h3>技术架构</h3>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                <div>
                    <h4>前端技术栈</h4>
                    <ul>
                        <li>Vue 3 Composition API</li>
                        <li>TypeScript</li>
                        <li>Element Plus UI组件库</li>
                        <li>Vue Router 4</li>
                        <li>Pinia状态管理</li>
                        <li>Axios HTTP客户端</li>
                    </ul>
                </div>
                <div>
                    <h4>后端技术栈</h4>
                    <ul>
                        <li>.NET 6 Core</li>
                        <li>Entity Framework Core</li>
                        <li>Clean Architecture</li>
                        <li>CQRS模式</li>
                        <li>AutoMapper</li>
                        <li>FluentValidation</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="section">
            <h3>页面结构</h3>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                <div>
                    <h4>已创建的页面</h4>
                    <ul>
                        <li><strong>SalesOrderList.vue</strong> - 销售订单列表页</li>
                        <li><strong>SalesOrderForm.vue</strong> - 销售订单表单组件</li>
                        <li><strong>SalesOrderDetail.vue</strong> - 销售订单详情页</li>
                    </ul>
                </div>
                <div>
                    <h4>已创建的文件</h4>
                    <ul>
                        <li><strong>types/salesOrder.ts</strong> - 类型定义</li>
                        <li><strong>api/salesOrderApi.ts</strong> - API服务</li>
                        <li><strong>router配置</strong> - 路由配置</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="section">
            <h3>API接口</h3>
            <table class="table">
                <thead>
                    <tr>
                        <th>接口</th>
                        <th>方法</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>/api/SalesOrder/GetSalesOrderList</td>
                        <td>GET</td>
                        <td>获取销售订单列表（支持分页和搜索）</td>
                    </tr>
                    <tr>
                        <td>/api/SalesOrder/GetSalesOrderById/{id}</td>
                        <td>GET</td>
                        <td>根据ID获取销售订单详情</td>
                    </tr>
                    <tr>
                        <td>/api/SalesOrder/CreateSalesOrder</td>
                        <td>POST</td>
                        <td>创建新的销售订单</td>
                    </tr>
                    <tr>
                        <td>/api/SalesOrder/UpdateSalesOrder</td>
                        <td>PUT</td>
                        <td>更新销售订单</td>
                    </tr>
                    <tr>
                        <td>/api/SalesOrder/DeleteSalesOrder/{id}</td>
                        <td>DELETE</td>
                        <td>删除销售订单</td>
                    </tr>
                    <tr>
                        <td>/api/SalesOrder/UpdateSalesOrderStatus</td>
                        <td>PUT</td>
                        <td>更新销售订单状态</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="section">
            <h3>使用方法</h3>
            <ol>
                <li><strong>启动后端服务</strong>：运行ManufacturingsERP.API项目</li>
                <li><strong>启动前端服务</strong>：在manufacturing-vue目录下运行npm run dev</li>
                <li><strong>访问销售订单页面</strong>：导航到/SalesOrderList</li>
                <li><strong>创建新订单</strong>：点击"新增销售订单"按钮</li>
                <li><strong>查看订单详情</strong>：点击列表中的"查看"按钮</li>
                <li><strong>编辑订单</strong>：点击"编辑"按钮进行修改</li>
            </ol>
        </div>

        <div class="section">
            <h3>注意事项</h3>
            <ul>
                <li>确保后端API服务正在运行（默认端口5000）</li>
                <li>检查数据库连接和表结构是否正确</li>
                <li>前端需要安装Element Plus和Vue 3相关依赖</li>
                <li>API调用需要正确的CORS配置</li>
                <li>建议先在开发环境测试功能完整性</li>
            </ul>
        </div>

        <div class="section">
            <h3>下一步计划</h3>
            <ul>
                <li>集成真实的客户、部门、项目数据</li>
                <li>添加审批流程功能</li>
                <li>实现订单导出功能（Excel、PDF）</li>
                <li>添加订单打印功能</li>
                <li>集成库存管理</li>
                <li>添加订单统计分析</li>
            </ul>
        </div>
    </div>

    <script>
        // 简单的交互功能
        document.addEventListener('DOMContentLoaded', function () {
            console.log('销售订单管理系统测试页面已加载');

            // 添加一些交互效果
            const sections = document.querySelectorAll('.section');
            sections.forEach(section => {
                section.addEventListener('mouseenter', function () {
                    this.style.boxShadow = '0 4px 20px rgba(64, 158, 255, 0.2)';
                });

                section.addEventListener('mouseleave', function () {
                    this.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
                });
            });
        });
    </script>
</body>

</html>